<template>
	<!--自定义动态tarbar 在需要展示tarbar的页面引入即可
    <tabBar selectedIndex = 0></tabBar>

    第一种：
     * 根据身份判断 动态显示tarbar内容

    第二种：
     * 有具体的页面传递需要动态显示的tarbar，也是支持的

     设计思路：tarbar组件根据页面传递的动态内容显示不同tarbar效果
  -->
	<view class="tab">
		<!--    <image src="/static/images/tabbar/index.png"></image>-->
		<view v-for="(item,index) in list" :key="index" class="tab-item" @click="switchTab(item, index)">
			<image class="tab_img" :src="currentIndex == index ? item.selectedIconPath : item.iconPath"></image>
			<view class="tab_text" :style="{color: currentIndex == index ? selectedColor : color}">{{ item.text }}
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		watch
	} from 'vue';


	const props = defineProps({
		selectedIndex: {
			type: Number,
			default: 0
		}
	});

	const color = ref("#666666");
	const selectedColor = ref("#64dfff");
	const list = ref([]);
	const currentIndex = ref(props.selectedIndex);
	const type = ref(0)

	onMounted(() => {
		currentIndex.value = props.selectedIndex;
			list.value = [{
				text: "工作",
				pagePath: "/pages/index/index",
				iconPath: "/static/tabPicture/leijixuexikejie-unselect.png",
				selectedIconPath: "/static/tabPicture/leijixuexikejie.png"
			},  {
				text: "我的",
				pagePath: "/pages/teacherInfo/teacherInfo",
				iconPath: "/static/tabPicture/wode-unselect.png",
				selectedIconPath: "/static/tabPicture/wode.png"
			}];
		
	});

	watch(() => props.selectedIndex, (newIndex) => {
		currentIndex.value = newIndex;
	});

	const switchTab = (item, index) => {
		currentIndex.value = index;
		const url = item.pagePath
		
		console.log("url", url);

		// 跳转tabbar 使用这种方式
		uni.reLaunch({
			url:url
		})

		// 跳转普通页面使用这种方式
		
	};
</script>

<style lang="scss">
	.tab {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 50px;
		background: white;
		display: flex;
		justify-content: center;
		align-items: center;
		padding-bottom: env(safe-area-inset-bottom); // 适配iphoneX的底部

		.tab-item {
			flex: 1;
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;

			.tab_img {
				width: 20px;
				height: 20px;
			}

			.tab_text {
				font-size: 10px;
				margin-top: 5px;
				margin-bottom: 2px;
			}
		}
	}
</style>